<template>
  <div>
    <div id="myModal" class="modal a-c" v-show="ispopshow">
      <div class="modal-content" :class="{'thanks':prizeType=='0',checkinheight:ischeckin}">
        <p class="thankspar" v-if="!ischeckin&&prizeType=='0'">谢谢参与</p>
        <div class="prize-name" v-else>
          <p class="congratulatetips" v-if="!ischeckin&&prizeType!='0'">恭喜您获得</p>
          <p class="giftcontent" v-if="!ischeckin&&prizeType!='0'">{{prizeName}}</p>
          <div v-else-if="ischeckin" class="checkincontent">
            <p  class="extraicon"></p>
            <p class="checkintext">连续签到至该天可额外获得{{extracoin}}个绿币</p>
          </div>
        </div>
        <div class="confirmgift a-c" @click="confirm($event)"><p>{{confirmtext}}</p></div>
      </div>
    </div>
  </div>
</template>
<script>
export default{
    data(){
      return{
        confirmtext:this.ischeckin?'知道了':'确定'
      }
    },
    components:{
     
    },
    mounted(){
    },
    props:['prizeName','prizeType','ispopshow','ischeckin','extracoin'],
    methods:{
      confirm(){
        this.$emit("ispopshow",this.ispopshow);
      }
    }
  }
</script>
<style lang="less" >
.modal {
    position: fixed; /* Stay in place */
    z-index: 101; /* Sit on top */
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
    background-color: #fff;
    margin-top: 0.88rem;
    width: 5.62rem;
    height: 2.66rem;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
}
.modal-content p{
   display: flex;
   justify-content: center
}
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.modaltopimg{
  height: 1rem;
}
.congratulatetips{
  font-size: 0.34rem;
  color: #777777;
  padding-top: 0.45rem;
}
.giftcontent{
  font-family: PingFangSC Medium;
  font-size: 0.38rem;
  color: #333;
  padding-top: 0.12rem;
}
.confirmgift{
  width: 100%;
  height: 0.91rem;
}
.confirmgift p{
  font-size: 0.32rem;
  color: #FB685B;
}
.deletepop{
  width: 0.42rem;
  height: 0.42rem;
  margin-top: 0.4rem
}
.newrepout{
  line-height: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thankspar{
  height: 100%;
  // margin-top: 0.55rem;
  display: flex;
  display: -webkit-flex; 
  justify-content: center;
  -webkit-justify-content: center;
  align-items:center;
  -webkit-align-items: center;
  font-size: 0.32rem;
  border-bottom: 1px solid #D1D1D1;
  flex: 1;
  color: #333;
}
.prize-name{
  flex: 1;
  border-bottom: 1px solid #D1D1D1;
}
.thanks{
  height: 2.34rem;
}
.checkinheight{
  height: 3rem;
}
.extraicon{
  position: absolute;
  left: 50%;
  margin-top:8px;
	transform: translateX(-50%);
	width: 52px;
	height: 52px;
	background: url('../../assets/lvb-tan.png') no-repeat;
	background-size: cover;
	z-index: 1;
}
.checkincontent{
  position: relative;
  height: 100%;;
}
.checkintext{
  width: 100%;
  position: absolute;
  margin-top:65px;
 text-align: center;
   color: #333;
 font-size: 0.3rem;
}
</style>

